<template>
  <view class="w-375px text-primary flex-col-center mt-[var(--status-bar-height)] mt-30px">
    <!-- Logo 区域 -->
    <LogoView />
    
    <!-- 搜索和位置区域 -->
    <view class="h-60px w-375px">
      <view class="w-full h-full px-18rpx flex">
        <view class="h-full">
          <view class="flex px-18rpx h-full" @click="toNearShopNew()">
            <view class="flex-center text-#334155">
              <view class="flex items-center flex-col translate-y-[8rpx]">
                <view class="i-local-location w-12px h-12px" />
                <text class="text-[12rpx]">{{ hospitalData.distance }}km</text>
              </view>
              <view class="text-[20rpx] max-w-[240rpx] truncate">{{ hospitalData.name }}</view>
            </view>
            <view class="flex-center text-#334155 text-[16rpx]">
              (切换机构)
            </view>
          </view>
        </view>
        <view class="flex-1 flex items-center px-1">
          <input 
            type="text" 
            class="flex-1 text-[16rpx] myx" 
            v-model="keyword" 
            placeholder="请输入服务名称" 
            placeholder-class="text-gray-400" 
          />
          <view class="i-local-search w-24px h-24px text-gray-400 mx-2" @tap="searchService"/>
        </view>
      </view>
    </view>

    <!-- 公告栏 -->
    <nut-noticebar class="w-full" :text="noticeText" v-if="showNotice"/>
    
    <!-- 轮播图区域 -->
    <view v-if="showSwiper"
      class="w-375px flex-col-center justify-between items-center bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70">
      <view class="w-375px">
        <nut-swiper 
          class="w-375px" 
          :init-page="0" 
          :auto-play="3000" 
          pagination-visible 
          pagination-color="#059669"
          pagination-unselected-color="#808080">
          <nut-swiper-item 
            v-for="(item, index) in swiperList" 
            :key="index" 
            class="w-375px swiper_item"
            @click="toInformation(item)">
            <image 
              :src="item.pic" 
              alt="" 
              class="w-375px swiper_img" 
              mode="aspectFit" 
              draggable="false" 
            />
          </nut-swiper-item>
        </nut-swiper>
      </view>
    </view>

    <!-- 健康卡片 -->
    <view class="w-375px py-18rpx" v-show="showHealthCard">
      <view class="h-full flex-col-center px-10rpx">
        <HealthCard />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import LogoView from './LogoView.vue';
import HealthCard from './HealthCard.vue';

// 搜索关键词
const keyword = ref('');

// 公告文本
const noticeText = ref('欢迎使用安好护理服务');

// 显示控制
const showNotice = ref(true);
const showSwiper = ref(true);
const showHealthCard = ref(true);

// 医院数据
const hospitalData = ref({
  name: '广西壮族自治区人民医院',
  distance: '2.5'
});

// 轮播图数据
const swiperList = ref([
  {
    id: 1,
    pic: 'http://www.dzgktf.com/templets/default/images/wtyt.jpg',
    title: '护理服务1'
  },
  {
    id: 2,
    pic: 'http://www.dzgktf.com/templets/default/images/wtyt.jpg',
    title: '护理服务2'
  },
  {
    id: 3,
    pic: 'http://www.dzgktf.com/templets/default/images/wtyt.jpg',
    title: '护理服务3'
  }
]);

// 搜索服务
function searchService() {
  if (!keyword.value.trim()) {
    console.log('请输入服务名称');
    return;
  }
  console.log('搜索服务:', keyword.value.trim());
  // 实际项目中这里可以跳转到搜索结果页面
}

// 切换机构
function toNearShopNew() {
  console.log('切换机构');
  // 实际项目中这里可以跳转到机构选择页面
}

// 轮播图点击
function toInformation(item: any) {
  console.log('点击轮播图:', item);
  // 实际项目中这里可以跳转到详情页面
}
</script>

<style lang="scss">
.m_card {
  backdrop-filter: blur(10px) brightness(90%);
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
}

.swiper_item {
  height: 400rpx;
}

.swiper_img {
  height: 100%;
  width: 100%;
}

.myx{
  font-size: 20rpx !important;
  border: solid 1px #ddd;
  padding: 4rpx 30rpx;
  border-radius: 30rpx;
}
</style>
